<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${!editing ? '新增' : '修改'}定金`,
			size: '500px',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-card shadow="never">
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-position="top"
				:disabled="saving"
			>
				<el-form-item label="所属事业部" prop="biz_id">
					<cl-select
						v-model="form.biz_id"
						filterable
						style="width: 100%"
						:disabled="editing"
						@change="changeBiz"
					>
						<el-option
							v-for="(item, index) in business"
							:key="index"
							:label="item.biz_name"
							:value="item.biz_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="品牌" prop="bra_id">
					<cl-select
						v-model="form.bra_id"
						placeholder="请选择品牌"
						filterable
						style="width: 100%"
					>
						<el-option
							v-for="item in bizRefData.brand"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="定金金额">
					<el-table
						:data="form.deposits"
						header-row-class-name="dt-table-thead"
						:header-cell-style="{ textAlign: 'center' }"
						:cell-style="{ textAlign: 'center' }"
						style="width: 100%"
						border
					>
						<el-table-column type="index" label="#" width="50" />
						<el-table-column label="定金金额">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`deposits.${$index}.amount`"
									:rules="rules.amount"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model="row.amount"
										@blur="row.amount = $event.target.value"
										placeholder="输入定金金额"
										oninput="value=value.replace(/[^\d\.]/g,'')"
									>
										<template slot="prepend">￥</template>
									</el-input>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="定金数">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`deposits.${$index}.num`"
									:rules="rules.num"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model="row.num"
										@blur="row.num = $event.target.value"
										placeholder="输入定金数"
										oninput="value=value.replace(/[^\d\.]/g,'')"
									/>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="70" v-if="!editing">
							<template slot-scope="{ row, $index }">
								<el-button
									v-if="form.deposits.length - 1 == $index"
									icon="el-icon-plus"
									@click="addDepositSetting"
									circle
								/>
								<el-button
									v-else
									icon="el-icon-minus"
									@click="deleteDepositSetting(row, $index)"
									circle
								/>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
		</el-card>
	</cl-drawer>
</template>
<script>
import { validate } from "@/utils/validate";

export default {
	data() {
		return {
			type: "add",
			saving: false,
			editing: false,
			form: {
				id: "",
				biz_id: "",
				bra_id: "",
				deposits: []
			},
			// 品牌列表
			brandList: [],
			depositData: [{ isNew: true, amount: "", num: "" }],
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				amount: [
					{ required: true, message: "请输入定金金额" },
					// { validator: validate.targetVal("请核实定金金额或定金数！") }
				],
				num: [
					{ required: true, message: "请输入定金数" },
					{ validator: validate.targetVal("请核实定金金额或定金数！") }
				]
			}
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data = {}) {
			this.$refs.drawer.create(async () => {
				this.reset();
				this.editing = editing;
				if (editing) {
					this.form = { ...data };
					Object.keys(this.form).forEach(k => {
						if (k == "deposits") return;
						this.form[k] = data[k] ?? "";
					});
					this.form.deposits = [
						{ amount: data.deposit, num: data.deposit_num, id: data.deposit_num }
					];
					if (data.bra_id == 0) {
						this.form.bra_id = "";
					}
				}
				await this.init();
			});
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
		},
		//切换事业部
		changeBiz() {
			this.form.bra_id = "";
			this.init();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { deposits, biz_id, ...args } = this.form;
				let form = { ...args, biz_id };
				if (!this.editing) {
					form.deposits = deposits;
				} else {
					form.deposit = deposits[0].amount;
					form.deposit_num = deposits[0].num;
				}
				await this.$service.config[!this.editing ? "depositAdd" : "depositEdit"](form).done(
					() => {
						this.saving = false;
					}
				);
				this.close();
				this.$message.success(`${!this.editing ? "新增" : "修改"}成功`);
				this.$emit("confirm", biz_id, !this.editing ? true : false);
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.$refs.form.resetFields();
			this.form.deposits = [];
			this.addDepositSetting();
		},
		addDepositSetting() {
			this.form.deposits.push({
				amount: "",
				num: "",
				key: Date.now()
			});
		},
		deleteDepositSetting(i) {
			this.form.deposits.splice(i, 1);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table {
		.el-form-item {
			margin-bottom: 0 !important;
		}
	}
}
</style>
